<div class="container-fluid" style="height: 100%">
    <form id="page_form" action="/page/modify" method="post" style="height: 98%" onsubmit="return false">
    <div class="row">{{$pageContent := .page_content}}{{$document := .document}}
        <div class="col-md-12">
            <input type="hidden" name="document_id" value="{{$document.document_id}}">
            <div class="row">
                <div class="col-md-10">
                    <input type="text" name="name" class="form-control" placeholder="请输入文档名称" value="{{$document.name}}" {{if eq $document.parent_id "0"}} readonly="readonly" {{end}}>
                </div>
                <div class="col-md-2 text-center" >
                    <button type="button" class="btn btn-primary" onclick="Page.ajaxSave(this.form, {{.sendEmail}}, {{.autoFollowDoc}})"><i class="fa fa-save"></i> 保存</button>
                    <button type="button" class="btn btn-default" onclick="Page.cancelSave('确定要放弃此次修改吗?', '/document/index?document_id={{$document.document_id}}')"><i class="fa fa-mail-reply"></i> 取消</button>
                </div>
            </div>
        </div>
    </div>
    <div class="row" style="height: 98%; padding-top: 8px;">
        <div class="col-md-12" style="height: 98%">
            <div id="document_page_editor" style="height: 98%"></div>
        </div>
    </div>
    </form>
</div>
<script type="text/javascript">
    if(parent.layoutClose) {
        parent.layoutClose();
    }
    if(parent.hiddenScrollY) {
        parent.hiddenScrollY();
    }
    var storageId = "mm_wiki_doc_"+{{$document.document_id}}
    $(function() {
        editormd.katexURL = {
            js  : "/static/plugins/editor.md/lib/katex/katex.min",
            css : "/static/plugins/editor.md/lib/katex/katex.min"
        };
        var editor = editormd("document_page_editor", {
            width: "100%",
            // height: height,
            path : '/static/plugins/editor.md/lib/',
            toolbarIcons : function() {
                // Using "||" set icons align right.
                return [
                    "sidebar", "save", "|",
                    "undo", "redo", "|",
                    "bold", "del", "italic", "quote", "|",
                    "h1", "h2", "h3", "h4", "h5", "h6", "|",
                    "list-ul", "list-ol", "hr", "|",
                    "link", "reference-link", "image", "attachment", "code", "preformatted-text", "code-block", "table", "datetime", "html-entities", "pagebreak", "|",
                    "goto-line", "watch", "preview", "search", "|",
                    "help"
                ]
            },
            // 增加自定义工具栏
            toolbarCustomIcons : {
                sidebar   : '<a onclick="parent.layoutToggle()" title="展开关闭侧边栏"><i class="fa fa-columns item"></i></a>',
                save : "<a onclick="+'Page.ajaxSave("#page_form")'+" title='保存文档'><i class='fa fa-save'></i></a>",
                attachment : '<a onclick="Page.attachment({{$document.document_id}})" title="上传附件"><i class="fa fa-paperclip item"></i></a>'
            },
            theme : "default",
            previewTheme : "default",
            editorTheme : "default",
            markdown : {{$pageContent}},
            codeFold : true,
            placeholder: "欢迎使用 MM-Wiki，请使用 Markdown 规范编写！",
            //syncScrolling : false,
            // 保存 HTML 到 Textarea
            saveHTMLToTextarea: false,
            searchReplace: true,
            // 关闭实时预览
            //watch : false,
            // 开启 HTML 标签解析，为了安全性，默认不开启
            // htmlDecode : "style,script,iframe|on*,alert",
            // 开启 HTML 标签解析，为了安全性，默认不开启
            // htmlDecode : "style,script,iframe,sub,sup,embed,img|on*",
            //关闭工具栏
            //toolbar  : false,
            // 关闭预览 HTML 的代码块高亮，默认开启
            //previewCodeHighlight : false,
            emoji : false,
            taskList : true,
            tocm : true,                  // Using [TOCM]
            tex : true,                   // 开启科学公式TeX语言支持，默认关闭
            flowChart : true,             // 开启流程图支持，默认关闭
            sequenceDiagram : true,       // 开启时序/序列图支持，默认关闭,
            //dialogLockScreen : false,   // 设置弹出层对话框不锁屏，全局通用，默认为true
            //dialogShowMask : false,     // 设置弹出层对话框显示透明遮罩层，全局通用，默认为true
            //dialogDraggable : false,    // 设置弹出层对话框不可拖动，全局通用，默认为true
            //dialogMaskOpacity : 0.4,    // 设置透明遮罩层的透明度，全局通用，默认值为0.1
            //dialogMaskBgColor : "#000", // 设置透明遮罩层的背景颜色，全局通用，默认为#fff
            imageUpload : true,
            imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
            imageUploadURL : "/image/upload?document_id={{$document.document_id}}",
            onload : function() {
                //Vincent [46603415@qq.com] 新增图片粘贴上传功能 Start
                $('#document_page_editor').on("paste",function(e){
                    //判断图片类型的正则
                    var isImage=(/.jpg$|.jpeg$|.png$|.bmp$|.webp$|.gif$/i);
                    var e = e || event;
                    var img=null;
                    //IE支持window.clipboardData,chrome支持e.originalEvent.clipboardData
                    var clipboardData = e.originalEvent.clipboardData || window.clipboardData;
                    if(!(clipboardData&&clipboardData.items)){
                        return;
                    }

                    for(var i=0,length=clipboardData.items.length;i<length;i++){
                        var item=clipboardData.items[i];
                        if(item.kind==='file'&&isImage.test(item.type)){
                            var time = Date.parse(new Date());
                            img=item.getAsFile();
                            var newname=time + "-" +img.name;
                            var url='/image/upload?document_id={{$document.document_id}}&guid='+time;
                            var formData=new FormData();
                            var newImg=new File([img],newname,{type:img.type});
                            console.log(newImg)
                            formData.append('editormd-image-file',newImg);

                            //上传图片
                            var xhr=new XMLHttpRequest();
                            //上传结束
                            xhr.onload=function () {
                                var data=JSON.parse(xhr.responseText);
                                console.log(data)
                                if (data.success === 1) {
                                    editor.insertValue("![image](" + data.url + ")\r\n");
                                }else {
                                    alert(data.message)
                                }
                            }

                            xhr.open('POST',url,true);
                            xhr.send(formData);
                            //当剪贴板里是图片时，禁止默认的粘贴
                            return false;
                        }
                    }
                });
                //Vincent [46603415@qq.com] 新增图片粘贴上传功能 End
                var docStorage = Storage.get(storageId);
                if (docStorage !== "") {
                    layer.confirm("是否恢复为上次未提交的本地文档？", {
                        btn: ['是','否'],
                        skin: Layers.skin,
                        btnAlign: 'c',
                        title: "<i class='fa fa-warning'></i><strong> 警告</strong>"
                    }, function(index) {
                        editor.setMarkdown(docStorage);
                        layer.close(index)
                    }, function() {});
                }
                // console.log('onload', this);
                // this.fullscreen();
                //this.unwatch();
                //this.watch().fullscreen();
                //this.setMarkdown("#PHP");
                // todo resize height
                // this.width("100%");
                // this.height(600);
                //this.resize("100%", 640);
            },
            onchange : function() {
                Storage.set(storageId, editor.getMarkdown());
            }
        });
    });

</script>